<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Smooth Streaming example, single videoElement</title>

    <script src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- add mss package which is required to play Smooth Streaming streams -->
    <script class="code" src="../../dist/modern/umd/dash.mss.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>

    <script class="code">
        function loadStream() {
            var streamUrl = document.getElementById('streamUrl').value;
            var licenseServerUrl = document.getElementById('licenseServerUrl').value;
            var protData = null;

            if (!streamUrl) {
                return;
            }

            /* Create protection data in case a license server was provided */
            if (licenseServerUrl) {
                protData = {
                    'com.widevine.alpha': {
                        serverURL: licenseServerUrl
                    }
                };
            }

            var video,
                player;

            player = dashjs.MediaPlayer().create();
            video = document.querySelector('video');
            player.initialize(); /* initialize the MediaPlayer instance */
            player.attachView(video); /* tell the player which videoElement it should use */
            player.setProtectionData(protData); /* set protection data (sets license server when required) */
            player.attachSource(streamUrl); /* provide the manifest source */
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-12">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Smooth Streaming example</h3>
                    <p>Example showing how to use dash.js to play Microsoft Smooth Streaming streams.</p>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1">Manifest URL</span>
                    <input type="text" id="streamUrl" class="form-control" placeholder="MPD URL"
                           value="https://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest"
                           aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon2">License Server Url:</span>
                    <input type="text" id="licenseServerUrl" class="form-control" placeholder="License Server URL"
                           aria-describedby="basic-addon2">
                </div>
                <button type="button" id="loadButton" class="btn btn-success" onclick="loadStream(this)">Load stream
                </button>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-8">
                <video controls="true"></video>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>


<script src="../highlighter.js"></script>
</body>
</html>
